Ext.define('FirstMate.view.Forecast', {
	extend: 'Ext.Carousel',
	alias: 'widget.forecastview',
	id : 'forecastView',
	config: {
		 direction: 'horizontal',
				items : [		         
						 {
							 docked: 'top',
							 xtype: 'toolbar',
							 layout : {
								 pack : 'center'
							 },
							 scrollable: {
								    direction: 'horizontal',
								    directionLock: true
							 }
						 //ui : 'light',
						 }] 
	},

	setWeatherForecast : function (weatherRecord) {

		var items = [];
		for (var i=0; i<8; i++)
		  {
			items.push(
				this.__createForm(weatherRecord,i)
			);
		  }
		this.setItems(items);
	},
	__createDescription : function(record, index){
		
		var hourly = record.raw.weather[0].hourly[index];
		var conditionsRecord = FirstMate.app.weatherCodesStore.getConditions(hourly.weatherCode);
		var hours = index * 3;
		var iconUrlPrefix = 'http://cdn.worldweatheronline.net/images/wsymbols01_png_64/'; 
		var description = 	
						    " <span style='color:red'>" + hours + ":00  " + "</span>" +
						    record.raw.weather[0].date +
						    '<br><br>Lat:    ' + record.raw.nearest_area[0].latitude + " " +
						    '<br>Lng:    ' + record.raw.nearest_area[0].longitude + " " +
						    '<br>' + 
						    record.raw.nearest_area[0].distance_miles +
						    ' miles away' + 
						    '<br><br>' +
						    '<center>' + 
						    '<img src="' +
						    iconUrlPrefix +
						    (hours < 9 || hours > 18? conditionsRecord.get('night_icon') : conditionsRecord.get('day_icon')) +		    
							'.png"</img>' +
						    '<br><br>' +
		
						    "<span style='color:'red'>" +
						    conditionsRecord.get("description") +
						    "</span>" +
						    
						    '<br><br>' +
						    
						    "24 hr temp range " + 
						    ((FirstMate.app.tideUnits == "ft") ? 
								    (    Math.round((9/5) * record.raw.weather[0].mintempC + 32)) : 
								    (record.raw.weather[0].mintempC )
								    ) +
						    " to " +
						    ((FirstMate.app.tideUnits == "ft") ? 
								    (    Math.round((9/5) * record.raw.weather[0].maxtempC + 32) + ' F' ) : 								    
								    	(record.raw.weather[0].maxtempC + ' C')
								    ) +

						    '<br>' +
						    "</center>"
						    ;
		return description;
		
	},
	__createForm : function(record,index){
		
		var hourly = record.raw.weather[0].hourly[index];
		form = new Ext.form.FormPanel({
			items: [
			        {
					    xtype: 'fieldset',
					    title : this.__createDescription(record,index)
					},
			        {
					    xtype: 'fieldset',
					    title: 'Wind',
					    items: 	[
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Direction',
								    labelWidth : '50%',
								    value : hourly.winddir16Point + " " + 
								    		hourly.winddirDegree
								},
					            {
					                xtype: 'textfield',
					                label: 'Gust',
					                labelWidth : '50%',
								    readOnly: true,
					                value : (FirstMate.app.tideUnits == 'm'? hourly.windspeedKmph + " kmh" : hourly.windspeedMiles + " mph") +  " / " + Math.round(hourly.windspeedKmph * 0.5399568) + " kts"
					            }
								]
					},
			        {
					    xtype: 'fieldset',
					    title: FirstMate.app.paidVersion ? 'Sea State' : 'Wave is available in Pro version only',
					    items: [
								{
								    xtype: 'textfield',
								    labelWidth : '50%',
								    readOnly: true,
								    label: 'Sig. Height',
								    value : FirstMate.app.paidVersion ?
								    	(FirstMate.app.tideUnits == 'm'? hourly.sigHeight_m + ' m' : Math.round(hourly.sigHeight_m  * 32.808399)/10 + ' ft') 
								    	: '*****'					    		  	
								},
					            {
					                xtype: 'textfield',
					                labelWidth : '50%',
								    readOnly: true,
					                label: 'Swell Height',
					                value : FirstMate.app.paidVersion ?
					                	(FirstMate.app.tideUnits == 'm'? hourly.swellHeight_m + ' m' : Math.round(hourly.swellHeight_m  * 32.808399)/10 + ' ft')
					                	: '*****'
					            },
								{
								    xtype: 'textfield',
								    label: 'Swell Dir',
								    labelWidth : '50%',
								    readOnly: true,
								    value :  FirstMate.app.paidVersion ?
								    	hourly.swellDir : '*****'
								},
								{
								    xtype: 'textfield',
								    label: 'Swell Period',
								    labelWidth : '50%',
								    readOnly: true,
								    value : FirstMate.app.paidVersion ?
								    	hourly.swellPeriod_secs + " sec"  : '*****'
								}
								]
					},
			        {
					    xtype: 'fieldset',
					    title: 'Conditions',
					    items: [
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Air Temp',
								    labelWidth : '50%',
								    value : 
								    	FirstMate.app.tideUnits == 'm'? hourly.tempC + ' C' : hourly.tempF +' F' 		
								},
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Water Temp',
								    labelWidth : '50%',
								    value : 
								    	FirstMate.app.tideUnits == 'm'? hourly.waterTemp_C + ' C' : hourly.waterTemp_F +' F' 		
								},
								{
									
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Pressure',
								    labelWidth : '50%',
								    value : 
								    	FirstMate.app.tideUnits == 'm'? hourly.pressure + ' mb' : Math.round(hourly.pressure  * 2.953)/100 + ' in'
								},
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Visibility',
								    labelWidth : '50%',
								    value :  FirstMate.app.tideUnits == 'm'? hourly.visibility + ' km' :  Math.round(hourly.visibility * 0.539956803456) + ' nm'
								},
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Clouds',
								    labelWidth : '50%',
								    value : hourly.cloudcover +' %'
								},
								{
								    xtype: 'textfield',
								    readOnly: true,
								    label: 'Precipitation',
								    labelWidth : '50%',
								    value : FirstMate.app.tideUnits == 'm'? hourly.precipMM + ' mm' : Math.round(hourly.precipMM  * 3.937)/100 + ' in'
								},
								{
								    xtype: 'textfield',
								    readOnly: true,
								    labelWidth : '50%',
								    label: 'Humidity',
								    value : hourly.humidity + " %"
								}
								]
					}
					]

		});
		
		return form;
		
	},
    setActiveWeatherItem : function(){
    	
    	var hours = new Date().getHours();
    	this.setActiveItem(hours == 0? 1 :  Math.floor(hours/3) + 1);    	
    }
});
